<template>
    <div>
        <el-container style="height: 100vh;">
            <el-header style="background-color: antiquewhite; line-height: 60px;">物业入住申请</el-header>
            <el-main>
                <el-row>
                    <el-col :span="6" :offset="9">
                        <el-input v-model="applicationForm.certifiedInfoName" placeholder="请输入内容">
                            <template slot="prepend">物业名称:</template>
                        </el-input>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 20px;">
                    <el-col :span="6" :offset="9">
                        <el-input v-model="applicationForm.certifiedInfoTel" placeholder="请输入内容">
                            <template slot="prepend">物业电话:</template>
                        </el-input>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 20px;">
                    <el-col :span="6" :offset="9">
                        <el-upload class="upload-demo" action="#" :http-request="uploadImage" :on-preview="handlePreview"
                            :on-remove="handleRemove" :before-remove="beforeRemove" multiple :limit="3"
                            :on-exceed="handleExceed" :file-list="fileList" :on-success="afterUpload">
                            <el-button size="small" type="primary">点击上传营业执照</el-button>
                            <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                        </el-upload>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 20px;">
                    <el-col :span="6" :offset="9">
                        <div class="block">
                            <span class="demonstration" style="color: darkgray;">创建时间：</span>
                            <el-date-picker v-model="applicationForm.certifiedInfoAddTime" type="date" placeholder="选择日期" value-format="yyyy-MM-dd HH:mm:ss" format="yyyy-MM-dd">
                            </el-date-picker>
                        </div>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 20px;">
                    <el-col :span="6" :offset="9">
                        <el-input v-model="applicationForm.certifiedInfoAddPerson" placeholder="请输入内容">
                            <template slot="prepend">创建人:</template>
                        </el-input>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 20px;">
                    <el-col :span="6" :offset="9">
                        <el-input v-model="applicationForm.certifiedInfoAddress" placeholder="请输入内容">
                            <template slot="prepend">详细地址:</template>
                        </el-input>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 20px;">
                    <el-col :span="6" :offset="9">
                        <el-input v-model="applicationForm.certifiedInfoLatitude" placeholder="请输入内容">
                            <template slot="prepend">经度:</template>
                        </el-input>
                    </el-col>
                </el-row>
                <el-row style="margin-top: 20px;">
                    <el-col :span="6" :offset="9">
                        <el-input v-model="applicationForm.certifiedInfoLongitude" placeholder="请输入内容">
                            <template slot="prepend">纬度:</template>
                        </el-input>
                    </el-col>
                </el-row>

                <el-row style="margin-top: 20px;">
                    <el-col>
                        <el-button type="primary" @click="ok">确 定</el-button>
                        <el-button @click="back">返回</el-button>
                    </el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
</template>


<script>
import { Backtop } from 'element-ui'

export default {
    name: "application",
    data() {
        return {
            fileList: [],
            applicationForm: {
                certifiedInfoName: "",
                certifiedInfoTel: "",
                certifiedInfoImg: "",
                certifiedInfoAddTime: "",
                certifiedInfoAddPerson: "",
                certifiedInfoAddress: "",
                certifiedInfoLatitude: null,
                certifiedInfoLongitude: null
            }
        }
    },
    methods: {
        back(){
            this.applicationForm.certifiedInfoName="",
            this.applicationForm.certifiedInfoTel="",
            this.applicationForm.certifiedInfoImg="",
            this.applicationForm.certifiedInfoAddTime="",
            this.applicationForm.certifiedInfoAddress="",
            this.applicationForm.certifiedInfoLatitude=null,
            this.applicationForm.certifiedInfoLongitude=null,
            this.$router.push("/login")
        },
        ok() {
            let a = this.applicationForm
            if (a.certifiedInfoName == "" || a.certifiedInfoTel == "" || a.certifiedInfoImg == "" || a.certifiedInfoAddTime == "" || a.certifiedInfoAddPerson == "" || a.certifiedInfoAddress == "" || a.certifiedInfoLatitude == null || a.certifiedInfoLongitude == null) {
                alert("请将信息补充完整")
            } else {
                console.log(this.applicationForm)
                this.$http.post("/certified/applicationForm/applicationForProperty",this.applicationForm).then(resp =>{
                    console.log(resp)
                    if(resp.data.code==200){
                        alert(resp.data.message)
                    }
                })
            }
        },
        beforeRemove(file, fileList) {
            return this.$confirm(`确定移除 ${file.name}？`);
        },
        handleExceed(files, fileList) {
            this.$message.warning(`当前限制选择 3 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
        },
        afterUpload(response, file, fileList) {
            console.log(response)
        },
        handlePreview(file) {
            console.log(file);
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        uploadImage(e) {
            let formData = new FormData()
            formData.append("image", e.file)
            this.$http.post("/certified/applicationForm/uploadImage", formData, {
                "Content-Type": "multipart/form-data"
            }).then(resp => {
                alert(resp.data.message)
                this.applicationForm.certifiedInfoImg = resp.data.data
            })
        },
    },
    created() {

    }
}
</script>

<style scoped>
.avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.avatar-uploader .el-upload:hover {
    border-color: #409EFF;
}

.avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
}

.avatar {
    width: 178px;
    height: 178px;
    display: block;
}
</style>